<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>通讯录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%; min-width: 260px;  overflow: hidden;display: none; }
/*顶部*/
.page-top{ position: absolute;top:0;left: 0;  height: 86px; width: 100%;z-index: 999; background:#fff; overflow: hidden; }
.page-top .top-nav{ width: 100%;  height: 50px;  }
.g-back{ float: left; width: 80px;  height: 50px;/*background: url(../img/g_03.png) center no-repeat; background-size: 18px; */  }
.g-other{float: right;width: 80px; height: 50px;  }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center;  }
#searchBar{ background: #fff; border:0; }
.weui-search-bar:before{ height: 0;width: 0 }
.weui-search-bar:after{ height: 0;width: 0 }
.weui-search-bar__label,.weui-search-bar__box{ background: #f3f4f9;  }
.weui-search-bar{ padding-top: 0; }
/*内容容器*/
/*内容*/
.page-wrap{position: absolute;top:0;left: 0; padding: 96px 0 50px 0; height: 100%; width: 100%;  background:#f8f8f8;overflow-y: auto; }
/*内容*/
.p-list{ display: block; padding:0 18px 0 45px; width: 100%;height: 65px;line-height: 65px; 
                               border-bottom: 1px solid #f2f2f2; font-size: 15px; color: inherit; }
.p-list .right{ height: 100%; width: 15px; }
.p-list .banji{padding-right:15px;margin-top: 16px; float: right; height: 50%;font-size: 14px; color: #1684f6; background: #fff; }
.p-list .banji option{font-size: 12px; padding-left: 10px; color: #666; }
.banji option:checked { color: #1684f6; }
.p-list-ul { display: none; background: #fff;   }
.p-list-ul li{ height: 50px; width: 100%;  }
.p-list-ul img{ float: left; margin:5px 18px 5px 30px; height: 40px; width: 40px; }
.p-list-ul .name,.p-list-ul .zhiwei{ height: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-list-ul .name{ float: left; width:80px; line-height: 50px; font-size: 15px;  }
.p-list-ul .zhiwei{ float: left; width:80px; line-height: 50px; font-size: 13px; color:#a1a1a1; }
.d-dianhua,.d-xinxi{ float: right; height: 100%; width:40px;  }

/*底部导航*/
.footer{position:absolute;bottom:0;left:0;height: 50px;width:100%;border-top:1px solid #f2f2f2;background: #fff;
     box-shadow: 1px 0px 50px #cfcfcf; }
.footer a{ float: left;padding-top:28px; width:25%;height:100%;text-align: center;font-size: 13px;  color:#949494;}
.footer .dian{ float:right;width: 7px;height: 7px;border-radius: 50%; background:#eb5740;margin-right:30%;margin-top: -22px; }
/*底部导航图标*/
.foot-xiao{ background:url(../img/xin2_03.png) center 7px no-repeat ; background-size:23px 20px; }
.foot-xiao.active{ background-image:url(../img/xin1_03.png); color: #2fa9fe; background-size:23px 20px;  }
.foot-tong{ background:url(../img/t2_03.png) center 7px no-repeat ; background-size:19px 21px;  }
.foot-tong.active{ background-image:url(../img/t1_03.png); color: #2fa9fe; background-size:19px 21px; }
.foot-gn{ background:url(../img/g2_03.png) center 7px no-repeat ; background-size:20px 20px;  }
.foot-gn.active{ background-image:url(../img/g1_03.png); color: #2fa9fe;background-size:20px 20px; }
.foot-wo{ background:url(../img/r2_03.png) center 7px no-repeat ; background-size:17px 22px;}
.foot-wo.active{ background-image:url(../img/r1_03.png); color: #2fa9fe;background-size:17px 22px; }
@media only screen and (max-width: 360px) {    
    .p-list-ul img{ float: left; margin:5px 18px 5px 15px; height: 40px; width: 40px; }
    .p-list-ul .zhiwei{ width:60px; overflow: hidden;}
}
@media only screen and (max-width: 315px) {    
    .p-list-ul .zhiwei{ display: none;}
}
/*小图片*/
.bg_1{ background:#fff url(../img/zh_03.png) 15px center no-repeat; background-size: 23px 18px; }
.bg_2{ background:#fff url(../img/rj_08.png)  15px center  no-repeat; background-size: 23px 20px; }
.bg_3{ background:#fff url(../img/wd_06.png)  15px center  no-repeat; background-size: 23px 20px; }
.g-left{padding-right:16px; background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{padding-right:16px; background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{padding-right:16px; background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.d-xinxi{ background: url(../img/xx_14.png) center no-repeat; background-size: 25px 21px;}
.d-dianhua{margin-right: 15px; background: url(../img/ddh_16.png) center no-repeat; background-size: 19px 21px;}
</style>
</head>
<body style="background: #f3f4f9;">
<div class="page-container" id="page-container">
           <!-- 头部 -->
            <div class="page-top">
                    <div class="top-nav" >
                            <a  href="###" class="g-back"></a>     
                            <a  class="g-other"></a>                
                            <span class="t-title">通讯录</span>                                                 
                    </div>
                    <div class="top-search" style="width:100%;">
                           <div class="weui-search-bar" id="searchBar" >
                                <form class="weui-search-bar__form">
                                      <div class="weui-search-bar__box">
                                            <i class="weui-icon-search"></i>
                                            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                      </div>
                                      <label class="weui-search-bar__label" id="searchText">
                                            <i class="weui-icon-search"></i>
                                            <span>搜索</span>
                                      </label>
                                </form>
                                <!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
                          </div>
                    </div>
            </div>

      <!-- 内容区 -->
      	   <div class="page-wrap"  id="p-content">
                <div>
                    <a class="p-list bg_1" href="zuzhijia.html">
                           组织架构 &nbsp; &nbsp; (<span>161</span>)
                           <i class="right g-left"></i>
                    </a>                     
                </div>
            
                <div>
                      <a class="p-list bg_2" href="wodequn.html">
                             我的群聊 &nbsp; &nbsp; (<span>3</span>)
                             <i class="right g-left"></i>
                      </a>                       
                </div>
            
                <div>
                        <a class="p-list bg_3" id="p-list_3">
                               任教班级 
                               <select class="banji" name="" id="">
                                     <option value="1" selected>三年级5班</option>
                                     <option value="2">三年级2班</option>
                                     <option value="3">三年级1班</option>
                               </select>
                        </a> 
                         <ul class="p-list-ul" style="display: block;" id="renjiao">
                                 <!-- 数据动态渲染 -->
                         </ul>    
                </div>

        	 </div>
  <!-- 底部导航 -->
  <div class="footer">
    <a class="foot-xiao" href="../xiaoxi/index.html"><i></i>消息</a>
    <a class="foot-tong active" href="../tongxunlu/index.html"><i></i>通讯录</a>
    <a class="foot-gn"  href="../gongneng/index.html"><i></i>功能</a>
    <a class="foot-wo" href="../wode/index.html"><i class="dian"></i>我的</a>
  </div>          
</div>
</body>
<script>
$.showLoading();
$(function(){
// 数据渲染
var arr = [
     { name:"赵华", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"赵华的", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"啊赵华", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"赵的华", w:"球球家长" , src:"../img/t1.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"小龙", w:"球球家是长" , src:"../img/t1.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"小娟", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"小芳", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"},
     { name:"小明", w:"球球家长" , src:"../img/t5.png",c:"三年五班",href:"../tongxunlu/geren.html"}
];

if( !!arr ){
    var strarr=[];
    $.each(arr,function(i,v){
                strarr.push(
                    '<li>'+
                              '<a href="'+v.href+'"><img src="'+v.src+'"></a>'+
                              '<span class="name">'+v.name+'</span>'+
                              '<span class="zhiwei">'+v.w+'</span>'+
                              '<a class="d-dianhua"></a>'+
                              '<a class="d-xinxi"></a>'+               
                   '</li>' 
                );        
      })
    $("#renjiao").html( strarr.join("") );
}

//跳转 私聊 页面
$('.p-list-ul').find(".d-xinxi").click(function(){
      $(this).attr('href','siliaoye.html')
})

// 搜索
$("#searchInput")[0].oninput=function () {
    var value =$.trim( $("#searchInput").val() );            //alert(value)
    var  strSelect = [];
    if( value){
          $.each(arr,function(i,v){
               if( v.name.match(value) ){
                      var str = v.name.replace( value, '<span style="color:red;"> '+value+'</span>')
                      strSelect.push(
                          '<li>'+
                                    '<img src="'+v.src+'">'+
                                    '<span class="name">'+str+'</span>'+
                                    '<span class="zhiwei">'+v.w+'</span>'+
                                    '<a class="d-dianhua"></a>'+
                                    '<a class="d-xinxi"></a>'+               
                         '</li>' 
                      );
               }
          })
          $("#renjiao").html( strSelect.join('') );
     }else{
          $("#renjiao").html( strarr.join("") );
     }
}
$.hideLoading();
$("#page-container").show(); 
});   

</script>
</html>